<template>
	<!--component/treechart.wxml-->
	<view
		class="treeChartBox"
		:style="{
			transformOrigin: 'center center',
			transform: `scale(${scaleNum}) `
		}"
	>
		<view class="tree-container">
			<view class="user-super-container">
				<!-- 画当前节点 -->
				<view class="rowText" v-if="dataSource.isNull != 1">
					<view class="rowText_top">
						【
						<text style="color: #ff4c5a">一世</text>
						】辈
					</view>
					<view class="rowText_bottom">
						男{{ dataSource.genderNum?.male }}女{{ dataSource.genderNum?.female }}
					</view>
				</view>
				<view class="user-partner-container">
					<!-- 有妻子 有儿子的情况下 给当前节点添加22.5rpx的右侧内边距-->
					<view
						class="user-container"
						:style="{
							paddingRight:
								dataSource.partner && dataSource.children ? '22.5rpx' : '0'
						}"
					>
						<!-- 每个子节点头部画一个垂直的线  根节点除外 -->
						<view v-if="!isRoot" class="vertical-line" />
						<!-- 用户信息 -->
						<view
							class="user-info"
							data-item="dataSource"
							@click="clickFamily(dataSource)"
						>
							<image
								v-if="dataSource.isNull == 1"
								class="user_bgc"
								src="http://112.124.50.179:8888/imgs/home/tx_bg.png"
								mode=""
							/>
							<image
								v-if="dataSource.gender == 2"
								class="user_bgc"
								src="http://112.124.50.179:8888/imgs/home/clanbg_female.png"
								mode=""
							/>
							<image
								v-else-if="dataSource.gender == 1"
								class="user_bgc"
								src="http://112.124.50.179:8888/imgs/home/clanbg_male.png"
								mode=""
							/>

							<image
								v-if="dataSource.isNull == 1"
								class="user-avatar"
								src="http://112.124.50.179:8888/imgs/home/tx.png"
								mode=""
							/>
							<image
								v-if="dataSource.gender == 2"
								class="user-avatar"
								:src="
									dataSource.headUrl ||
									'http://112.124.50.179:8888/imgs/home/tx_female.png'
								"
								mode=""
							></image>
							<image
								v-else-if="dataSource.gender == 1"
								class="user-avatar"
								:src="
									dataSource.headUrl ||
									'http://112.124.50.179:8888/imgs/home/tx_male.png'
								"
								mode=""
							></image>

							<view class="user-name">
								<view
									:class="[
										'user-name-text',
										dataSource.gender == 2 ? 'user-girl' : 'user-boy',
										dataSource.isNull == 1 && 'user-no'
									]"
								>
									{{ dataSource.name }}
								</view>
							</view>
						</view>

						<!-- 如果当前节点有儿子 有妻子 在节点下方画一条垂直的线 -->
						<view
							v-if="dataSource.children && dataSource.partner"
							class="vertical-line"
						/>
					</view>

					<!-- 处理配偶 -->
					<!-- 如果有配偶 没儿子  则画一根水平线关联夫妻关系 -->
					<view
						v-if="!dataSource.children && dataSource.partner"
						class="horizontal-line"
						style="width: 35rpx; margin-left: 5rpx; margin-right: 5rpx"
					/>

					<!-- 有妻子 没有儿子的情况下 给当前配偶节点添加22.5rpx的左侧内边距-->
					<view
						v-if="dataSource.partner"
						v-for="(item, index) in dataSource.partner"
						class="user-container"
						:style="{
							paddingLeft:
								dataSource.partner && dataSource.children ? '22.5rpx' : '0',
							paddingRight: index != dataSource.partner.length - 1 ? '22.5rpx' : '0'
						}"
					>
						<!-- 每个子节点头部画一个垂直的线 由于是配偶  要透明处理 -->
						<view
							v-if="!isRoot"
							class="vertical-line"
							style="background-color: rgba(0, 0, 0, 0)"
						/>
						<view class="user-info" @click="clickFamily(item)" data-item="dataSource">
							<image
								v-if="item.gender == 2"
								class="user_bgc"
								src="http://112.124.50.179:8888/imgs/home/clanbg_female.png"
								mode=""
							/>
							<image
								v-else
								class="user_bgc"
								src="http://112.124.50.179:8888/imgs/home/clanbg_male.png"
								mode=""
							/>
							<image
								v-if="item.gender == 2"
								class="user-avatar"
								:src="
									item.headUrl ||
									'http://112.124.50.179:8888/imgs/home/tx_female.png'
								"
								mode=""
							></image>
							<image
								v-else
								class="user-avatar"
								:src="
									item.headUrl ||
									'http://112.124.50.179:8888/imgs/home/tx_male.png'
								"
								mode=""
							></image>
							<view class="user-name">
								<view
									:class="[
										'user-name-text',
										item.gender == 2 ? 'user-girl' : 'user-boy'
									]"
								>
									{{ item.name }}
								</view>
							</view>
						</view>

						<!-- 如果当前节点有儿子 在配偶下方画一条垂直的线 -->
						<view v-if="dataSource.children" class="vertical-line" />
					</view>
				</view>
				<!-- 如果当前节点有儿子并且有配偶 在夫妻下方画一条水平的线 并设置左下 右下圆角 -->
				<view
					v-if="dataSource.children && dataSource.partner"
					class="horizontal-line left-bottom-radius right-bottom-radius"
					style=""
				/>
			</view>

			<!-- 有多个儿子 先要画一条垂直的线 再画一条水平的线 -->
			<view v-if="dataSource.children?.length > 1" class="vertical-line" />

			<!-- 渲染子节点 如果他的下级最后一个子节点有配偶 则下级的整个布局向右移动144rpx -->
			<view
				v-if="dataSource.children"
				class="children-container"
				:style="{
					marginLeft: dataSource.children[dataSource.children?.length - 1].partner
						? `calc(144rpx * ${
								dataSource.children[dataSource.children?.length - 1].partner.length
						  })`
						: '0'
				}"
			>
				<block v-for="(item, index) in dataSource.children" :key="key">
					<!-- 画当前节点 -->
					<view class="children-super">
						<block v-if="dataSource.children?.length > 1">
							<!-- 第一个的情况 -->
							<view
								v-if="index == 0"
								:class="[
									'horizontal-line',
									'left-top-radius',
									item.partner ? 'first-partner-line' : 'first-line'
								]"
							/>
							<!-- 最后一个 -->
							<view
								v-else-if="index == dataSource.children?.length - 1"
								:class="[
									'horizontal-line',
									'right-top-radius',
									item.partner ? 'last-partner-line' : 'last-line'
								]"
							/>
							<!-- 中间的 -->
							<view v-else class="horizontal-line" style="width: 100%" />
						</block>
						<treeChild :dataSource="item" @clickFamily="clickFamily" />
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, watch, watchEffect, nextTick } from 'vue';
import treeChild from '@/components/familyTree/wx/treeChild.vue';
import _ from 'lodash';
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;
const clientHeight = document?.body.clientHeight || uni.getSystemInfoSync().windowHeight;
const props = defineProps({
	dataSource: {
		type: Object,
		default: {},
		required: true
	},
	isRoot: {
		type: Boolean,
		default: false
	}
});
const dataSource = ref(props.dataSource);
const isRoot = ref(true);
const emits = defineEmits(['clickFamily']);

const scaleNum = ref(1);

const clickFamily = (data) => {
	emits('clickFamily', data);
};
const handledData = ref({});
const width = ref(0);
const height = ref(0);
const heightNum = ref(1); //总层数
const genderNum = reactive([]); //每层男女人数

onMounted(() => {
	console.log('onMounted');
	//获取树宽高
	// #ifdef H5
	nextTick(() => {
		console.log('nextTick');
		setTimeout(() => {
			console.log('setTimeout');
			uni.createSelectorQuery()
				.select('.treeChartBox')
				.boundingClientRect((res) => {
					console.log(res);
					width.value = res.width;
					height.value = res.height;
					console.log('res', res);
				})
				.exec();
		}, 500);
	});
	// #endif

	// #ifdef MP-WEIXIN
	let widthNum = handleGetTreeExtent(props.dataSource) + 2;
	heightNum.value = handleGetTreeDeep(dataSource.value) + 1;
	width.value = widthNum * uni.upx2px(200);
	height.value = heightNum.value * uni.upx2px(300);
	// #endif
});

watchEffect(() => {
	dataSource.value = props.dataSource;
	isRoot.value = props.isRoot;

	//计算缩放比例
	if (width.value > clientWidth - 100) {
		scaleNum.value = (clientWidth - 100) / width.value;
		console.log(scaleNum.value);
	}
	if (height.value > clientHeight - 200) {
		scaleNum.value =
			(clientHeight - 200) / height.value < scaleNum.value
				? (clientHeight - 200) / height.value
				: scaleNum.value;
	}
});

//数字换成中文
const numToChinese = (num) => {
	const numChars = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
	const posChars = ['', '十', '百', '千'];
	const sectionChars = ['', '万', '亿', '万亿'];

	if (num === 0) {
		return '零';
	}

	let str = '';
	let sectionIndex = 0;
	while (num > 0) {
		let section = num % 10000;
		if (section !== 0) {
			let sectionStr = '';
			let unit = 0;
			while (section > 0) {
				let digit = section % 10;
				if (digit !== 0) {
					sectionStr = numChars[digit] + posChars[unit] + sectionStr;
				} else if (!sectionStr.startsWith('零')) {
					sectionStr = '零' + sectionStr;
				}
				section = Math.floor(section / 10);
				unit++;
			}
			str = sectionStr + sectionChars[sectionIndex] + str;
		}
		sectionIndex++;
		num = Math.floor(num / 10000);
	}
	return str;
};

// 获取树的广度
const handleGetTreeExtent = (node) => {
	let extend = 0;
	node.children?.forEach((item) => {
		if (item.children) {
			extend += handleGetTreeExtent(item);
		} else {
			if (item.partner) {
				extend += 2;
			} else {
				extend += 1;
			}
		}
	});
	return extend;
};

// 获取树的深度
const handleGetTreeDeep = (fileHeader) => {
	let deep = 0;
	fileHeader.children?.forEach((item) => {
		if (item.children) {
			deep = Math.max(deep, handleGetTreeDeep(item) + 1);
		} else {
			deep = Math.max(deep, 1);
		}
	});
	return deep;
};
</script>

<style lang="scss" scoped>
.treeChartBox {
	position: relative;
}
.tree-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-super-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.rowText {
	position: absolute;
	left: -170rpx;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	flex-direction: column;

	.rowText_top {
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 36rpx;
	}

	.rowText_bottom {
		font-weight: 400;
		font-size: 22rpx;
		color: #666666;
		line-height: 26rpx;
	}
}

.user-partner-container {
	display: flex;
	align-items: center;
	padding-left: 22.5rpx;
	padding-right: 22.5rpx;
}

.user-container {
	width: 96rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-info {
	overflow: hidden;
	position: relative;
	width: 116rpx;
	height: 264rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user_bgc {
	width: 116rpx;
	height: 264rpx;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.user-avatar {
	margin-top: 24rpx;
	height: 80rpx;
	width: 80rpx;
	display: block;
	border-radius: 50%;
}

.user-name {
	flex: 1;
	width: 100%;
	text-align: center;
	margin: 5rpx 0 10rpx;
	display: flex;
	align-content: center;
	justify-content: center;
}

.user-girl {
	color: #e57ba9;
}

.user-boy {
	color: #13acfc;
}

.user-no {
	color: #84785b;
}

.user-name-text {
	width: 40rpx;
	font-weight: 500;
	font-size: 28rpx;
	line-height: 40rpx;
	writing-mode: vertical-lr;
	margin-right: 5rpx;
}

.user-sex {
	height: 12rpx;
	width: 14rpx;
}

.user-self {
	color: white;
}

.vertical-line {
	height: 25rpx;
	width: 4rpx;
	background-color: #84785b;
}

.horizontal-line {
	width: calc(100% - 138rpx);
	height: 4rpx;
	background-color: #84785b;
}

.left-bottom-radius {
	border-bottom-left-radius: 2rpx;
}

.right-bottom-radius {
	border-bottom-right-radius: 2rpx;
}

.left-top-radius {
	border-top-left-radius: 2rpx;
}

.right-top-radius {
	border-top-right-radius: 2rpx;
}

.children-container {
	display: flex;
	flex-direction: row;
}

.children-super {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.first-partner-line {
	width: calc(50% + 22.5rpx + 50rpx);
	margin-left: calc(50% - 22.5rpx - 50rpx);
}

.first-line {
	width: calc(50% + 2rpx);
	margin-left: calc(50% - 2rpx);
}

.last-partner-line {
	width: calc(50% - 22.5rpx - 46rpx);
	margin-right: calc(50% + 22.5rpx + 46rpx);
}

.last-line {
	width: calc(50% + 2rpx);
	margin-right: calc(50% - 2rpx);
}

.placeholder-view {
	width: 125rpx;
	background-color: white;
}
</style>
